<!--表格行-->
<template>
  <el-table-column :sortable="sortable" :prop="property" :label="label" :width="width" class-name="no-padding">
    <template #default="{row, column, $index}">

      <table-switch :property="property" :value="row[property]"
                    :change="change" :row="row" :reverse="reverse"></table-switch>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
/* eslint-disable */
import TableSwitch from './table-switch.vue'

/**
 * 表格行级开关
 *
 * 首先能看到的，就是这个组件封装很奇怪，一个组件拆成两份写；
 *
 * 主要就是为了提供一个更优的 change() 事件：
 *
 * 所有的行内编辑组件，值都不是即时生效的，允许后台提交成功之后，再进行更新赋值。
 */
const props = defineProps({
    // 字段名
    property: String
    // 列名
    , label: String
    // 数据变化事件
    , change: {type: Function}
    // 宽度
    , width: {type: [Number, String], default: undefined}
    // 是否可排序
    , sortable: {type: [Boolean, String], default: false}
    // 正常情况下，true 表示禁用，状态值是反过来的，数据库通常是 is_disabled 而不是 enabled
    , reverse: {type: Boolean, default: false}
})
</script>
